<template>
  <div>
    <div class="form">
      <el-input v-model="form.brand" placeholder="请输入商品品牌"></el-input>
      <el-input v-model="form.price" placeholder="请输入商品单价"></el-input>
      <el-input v-model="form.shopnames" placeholder="请输入商品名称"></el-input>
      <el-input v-model="form.types" placeholder="请输入商品类型"></el-input>
    </div>
    <div style="width: 90%;margin: 2vw auto;">
      <el-upload
        ref="uploads"
        class="upload-demo"
        :action="action"
        multiple
        :data="data"
        name="files"
        :on-change="handleChange"
        :limit="3"
        :on-success="handleSuss"
        :file-list="fileList"
        :on-remove="handleRemove"
        :before-upload="handleBe"
      >
        <el-button size="small" type="primary"   >点击上传</el-button>
        <div slot="tip" style="color: red;" class="el-upload__tip">
          只能上传jpg/png文件，且不超过500kb
        </div>
      </el-upload>
    </div>
    <div>
      <div id="editor" style="width: 90%; margin: 0 auto"></div>
    </div>
    <div class="buttonView">
      <el-button type="primary" @click="reset">表单重置</el-button>
      <el-button type="primary" @click="uploads">表单上传</el-button>
    </div>
  </div>
</template>

<script>
import E from "wangeditor";
import {changeUploadShops} from '@/api/shop'
export default {
  data() {
    return {
      editor: null,
      fileList:[],
      /* 测试 */
      action:"http://111.231.22.97:9002/uploadShop",
      // action:"http://127.0.0.1:9002/uploadShop",
      data:{
        filename:"", //上传文件名
      },
      form:{
        brand:"", //品牌
        price:"", //单价
        shopnames:"",//商品名称
        types:"" ,//商品类型
      }
    };
  },
  mounted() {
    const editor = new E("#editor");

    // editor.disable();//编辑器禁用
    editor.config.menus = [
      "|",
      "fontfamily",
      "fontsize",
      "head",
      "unorderlist",
      "orderlist",
      "alignleft",
      "aligncenter",
      "alignright",
      "|",
      "source",
      "|", // '|' 是菜单组的分割线
      "bold",
      "underline",
      "italic",
      "strikethrough",
      "eraser",
      "forecolor",
      "bgcolor",
    ];
    this.editor = editor;
    editor.create();
  },
  methods: {
    btn() {
      console.log(this.editor.txt.html());
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    //文件上传时钩子
    handlePreview(file) {
      console.log(file,'files')
    },
    handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
    },
    handleRemove(file,fileList){
      console.log(file, fileList);
      this.fileList = [];
      fileList.forEach((ele) => {
        let obj = {
          name: ele.name,
          url: ele.url,
        };
        this.fileList.push(obj);
      });
    },
    //文件发生改变的钩子
    handleChange(file){
      console.log(file,'oopp')
      this.data.filename=file.name.split(".")[0]
    },
    handleSuss(e){
      console.log(e,'1111')
      this.fileList.push(e.data)
    },
    //重置
    reset(){
      console.log(this.fileList,'oopp')
    for(let keys in this.form){
        this.form[keys]=""
    }
    this.editor.txt.clear()
    this.$refs.uploads.clearFiles()
    },
    handleBe(){
      //判断表单
      // if(this.form.brand!=""&&this.form.price!=""&&this.form.shopnames!=""&&this.form.types!="" &&this.editor.txt.html()!=""){
      //    return Promise.resolve(true)
      // }
      // else{
      //   this.$message.warning("请填写完整表单")
      //   return Promise.reject(false)
      // }
    },
    uploads(){
      if(this.form.brand!=""&&this.form.price!=""&&this.form.shopnames!=""&&this.form.types!="" &&this.editor.txt.html()!=""){
        let obj={
          brand:this.form.brand,
          price:this.form.price,
          shopnames:this.form.shopnames,
          types:this.form.types,
          text:this.editor.txt.html(),
          imgs:this.fileList[0].url,
          imgurls:this.changeUrls()
        }
        changeUploadShops(obj).then(res=>{
          console.log(res,'res')
          if(res.code==200){
            this.$message.success("提交成功")
            this.reset()
          }
          else{
            this.$message.error("提交失败")
          }
        })
      }
      else{
        this.$message.warning("请填写完整表单")
      }
    },
    //获取详情url
    changeUrls(){
      let str=""
      this.fileList.forEach((ele,ind)=>{
         if(ind!=0){
          let index=ele.name+'.jpg'+'/'
          str+=index
         }
      })
      return str
    }

  },
};
</script>


<style lang="scss" scoped>
.form{
  width: 90%;
  margin: 2% auto;
  display: flex;
  flex-direction: column;
}
.form .el-input{
  width: 20%;
  margin: 0 0 1%;
}
.buttonView{
  margin: 2% 5%;
}
</style>